"use client";
import React from "react";
import Image from "next/image";
import Link from "next/link";
import { navLinks } from "@/constants";
import { usePathname } from "next/navigation";
import { SignedOut } from "@clerk/nextjs";
import { Button } from "@/components/ui/button";

export default function LeftSideBar() {
	const pathname = usePathname();
	return (
		<section className="background-light-900_dark200 custom-scrollbar light-border sticky left-0 top-0 h-screen flex flex-col justify-between overflow-y-auto border-r p-6  shadow-light-300 dark:shadow-none max-sm:hidden lg:w-[266px]">
			<div className="flex h-full flex-col gap-6">
				{navLinks.map((link) => {
					const isActive =
						(pathname.includes(link.route) &&
							link.route.length > 1) ||
						pathname === link.route;

					return (
						<Link
							key={link.route}
							href={link.route}
							className={`${isActive ? "primary-gradient text-light-900 rounded-lg" : "text-dark300_light900"} flex items-center justify-start gap-4 bg-transparent p-4`}
						>
							<Image
								className={`${isActive ? "" : "invert-colors"}`}
								src={link.imageURL}
								alt={link.label}
								width={20}
								height={20}
							></Image>
							<p
								className={`${isActive ? "base-bold" : "base-medium"} max-lg:hidden`}
							>
								{link.label}
							</p>
						</Link>
					);
				})}

				<SignedOut>
					<div className="flex flex-col gap-3 pb-6">
						{/* 登陆连接 */}
						<Link href="/sign-in">
							<Button className="small-medium btn-secondary min-h-[41px] w-full rounded-lg px-4 py-3 shadow-none">
								<Image
									src="/assets/icons/account.svg"
									alt="login"
									width={20}
									height={20}
									className="invert-colors lg:hidden"
								></Image>
								<span className="primary-text-gradient body-semibold max-lg:hidden">
									Sign In
								</span>
							</Button>
						</Link>
						{/* 注册连接 */}
						<Link href="/sign-in">
							<Button className="small-medium light-border-2 btn-tertiary min-h-[41px] w-full rounded-lg px-4 py-3 shadow-none  ">
								<Image
									src="/assets/icons/sign-up.svg"
									alt="register"
									width={20}
									height={20}
									className="invert-colors lg:hidden"
								></Image>
								<span className="text-dark-400 dark:text-light-900 body-semibold max-lg:hidden">
									Sign Up
								</span>
							</Button>
						</Link>
					</div>
				</SignedOut>
			</div>
		</section>
	);
}
